<template>
  <a-layout id="basic-layout" class="layout">
    <a-layout-header>
      <div class="logo" >体育管理后台</div>
      <a-menu
        theme="dark"
        mode="horizontal"
        @click="handleClick"
        :defaultSelectedKeys="['1']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">{{msg}}展示</a-menu-item>
        <a-menu-item key="2">用户设置</a-menu-item>
        <a-menu-item key="3">退出账号</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content>
      <a-breadcrumb :style="{padding: '16px 32px 0',background:$route.name=='account'||$route.name=='video'?'rgba(255, 255, 255, 0.2);':'white'}">
        <a-breadcrumb-item v-for="(item) in bread" :key="item">{{item}}</a-breadcrumb-item>
      </a-breadcrumb>
      <a-row v-if="$route.name!='account'&&$route.name!='video'" class="header" type="flex">
        <a-col class="header-logo" :span="3">
          <div class="ant-upload-preview" @click="uploadavatar=true" >
          <div class="mask">
            <a-icon type="plus" />
          </div>
          <img style="height:100px;width:100px" :src="avatar"/>
        </div>
        </a-col>
        <a-col :span="8">
          <a-row type="flex" align="bottom">
          <a-col :span='12'>
          <div class="header-title">{{title.name}}</div>
          <div class="header-content">{{title.member}}<a-icon type="import" style="fontSize:20px;margin-left:10px" @click="showImport=true" /></div>
          <div class="header-content">{{title.team}}</div>
          <div class="header-content">{{title.manager}}</div>
          </a-col>
          <a-col :span='12'>
        
          <Import v-if="showImport" @closeImport="closeImport"></Import>
        </a-col>
          </a-row>
        </a-col>
      </a-row>
      <div :style="{margin: '20px 30px',height:'60vh'}">
        <router-view></router-view>
      </div>
    </a-layout-content>
    <a-layout-footer
      style="text-align: center;padding:10px 50px"
    >Copyright &copy; 2020 西安类脑感知科技发展有限公司</a-layout-footer>
    <AvatarModal v-if="uploadavatar" ref='modal' @closeavatar='uploadavatar=false'></AvatarModal>
  </a-layout>
</template>

<script>
import Import from '../components/import'
import AvatarModal from '../components/AvatarModal'
export default {
  mounted() {
    const flag = parseInt(this.$route.params.params);
    switch (flag) {
      case 1:
        this.msg = "项目";
        this.bread.push("项目");
        this.title.name = this.$store.state.classa.name
        this.title.member = "运动员人数：11";
        this.title.team = "队伍总数：11";
        this.title.manager = "管理员";
        if(this.$store.state.classa.imgpath!==null)
          this.avatar='http://139.9.118.119:9999/showimg/?imgpath='+this.$store.state.classa.imgpath
        break;
      case 2:
        this.msg = "队伍";
        this.bread.push("项目", "队伍");
        this.title.name = this.$store.state.classb.name;
        this.title.manager = "管理员手机号：13131313";
        this.title.member = "运动员人数：11";
        this.title.team = "队伍总数：11";
        if(this.$store.state.classb.imgpath!==null)
          this.avatar='http://139.9.118.119:9999/showimg/?imgpath='+this.$store.state.classb.imgpath
        break;
      case 3:
        this.msg = "运动员";
        this.bread.push("项目", "队伍", "运动员");
        this.title.name = this.$store.state.classc.name;
        this.title.manager = "管理员手机号：13131313";
        this.title.member = "运动员人数：11";
        if(this.$store.state.classc.imgpath!==null)
          this.avatar='http://139.9.118.119:9999/showimg/?imgpath='+this.$store.state.classc.imgpath
        break;
      default:
        this.msg = "信息";
        this.bread.push("项目", "队伍", "运动员");
        break;
    }
    console.log(this.avatar)
  },
  components:{
    Import,
    AvatarModal
  },
  data() {
    return {
      uploadavatar:false,
      showImport:false,
      msg: "#",
      bread: [],
      avatar:"",
      title: {
        name: "教练：小王",
        manager: "管理员手机号：13131313",
        member: "运动员人数：11"
      }
    };
  },
  methods: {
    handleClick(e) {
      console.log(e.key);
      if(e.key==3){
        this.$router.push({name:'login'})
      }
    },
    closeImport(){
      this.showImport=!this.showImport
    },
    getimag(){
      const flag = parseInt(this.$route.params.params);
      switch(flag){
        case 1:
          if(this.$store.state.classa.imgpath!==null)
          this.avatar='http://139.9.118.119:9999/showimg/?imgpath='+this.$store.state.classa.imgpath
          break;
        case 2:
          if(this.$store.state.classb.imgpath!==null)
          this.avatar='http://139.9.118.119:9999/showimg/?imgpath='+this.$store.state.classb.imgpath
          break;
        case 3:
          if(this.$store.state.classc.imgpath!==null)
          this.avatar='http://139.9.118.119:9999/showimg/?imgpath='+this.$store.state.classc.imgpath
          break;
      }
    }
  }
};
</script>

<style lang="scss">
#basic-layout {
  width: 100%;
  background: #f0f2f5;
}
#basic-layout .logo {
  width: 120px;
  height: 31px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-right: 20px;
  float: left;
}
.header {
  padding: 10px 32px;
  background: white;
  .header-title {
    font-size: 20px;
    font-weight: 500;

    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 16px;
    flex: auto;
  }
  .header-content {
    color: #b3b3b3;
    font-size: 16px;
  }
  .achievement-title {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 4px;
  }
  .achievement-number {
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 32px;
    margin: 0;
  }
}

.ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 100px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0,0,0,0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      max-width: 100px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
